<script>
import HumanConfigList from "@/views/aihuman/humanManagement/List.vue";
import AddHuman from "@/views/aihuman/humanManagement/addHuman.vue";
import AddHuman2d from "@/views/aihuman/humanManagement/addHuman2d.vue";
import {mapGetters} from "vuex";

export default {
  name: "humanConfig",
  components: {AddHuman2d, AddHuman, HumanConfigList},
  data() {
    return {
      form: {
        aimetaName: ''
      },
      searchForm: {},
      tabs: '3',
      isShowAdd: false
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission[`config-add`], false),
        editBtn: this.vaildData(this.permission[`config-update`], false),
        setDefaultBtn: this.vaildData(this.permission['config-default-set'], false),
        deleteBtn: this.vaildData(this.permission['config-delete'], false),
      }
    }
  },
  methods: {
    getHumanItem(item) {
      console.log(item);
      if (this.tabs === '3' || this.tabs === '4') {
        this.isShowAdd = true
        this.$refs.addHuman.curStep = 1
        this.$refs.addHuman.humanId = item.id
        this.$refs.addHuman.getDetail(item.id)
      } else {
        this.isShowAdd = true
        this.$refs.addHuman2d.curStep = 1
        this.$refs.addHuman2d.humanId = item.id
        this.$refs.addHuman2d.getDetail(item.id)
      }
    },
    handleTab({name}) {
      console.log(name);
      if (name === '3' || name === '4') {
        this.$nextTick(() => {
          this.$refs.listRef.form.dimensionType = name
          this.$refs.addHuman.form.dimensionType = name
          this.$refs.listRef.getHumanList()
        })
      } else {
        this.$nextTick(() => {
          this.$refs.listRef.form.dimensionType = name
          this.$refs.addHuman2d.form.dimensionType = name
          this.$refs.listRef.getHumanList()
        })
      }

    },
    toAddHuman(tabs) {
      console.log(typeof tabs, tabs);
      if (tabs === '3') {
        this.isShowAdd = true
        this.$refs.addHuman.curStep = 1
        this.$refs.addHuman.humanId = ''
        this.$refs.addHuman.initPage(tabs)
      } else if (tabs === '4') {
        this.isShowAdd = true
        this.$refs.addHuman.curStep = 1
        this.$refs.addHuman.humanId = ''
        this.$refs.addHuman.initPage(tabs)
      } else {
        this.isShowAdd = true
        this.$refs.addHuman2d.curStep = 1
        this.$refs.addHuman2d.humanId = ''
        this.$refs.addHuman2d.initPage(tabs)
      }
    },
    saveData() {
      this.isShowAdd = false
      this.$refs.listRef.getHumanList()
    },
    search() {
      this.$refs.listRef.form.aimetaName = this.form.aimetaName
      this.$refs.listRef.getHumanList()
    },
    onReset() {
      this.form.aimetaName = ''
      this.$refs.listRef.form.aimetaName = ''
      this.$refs.listRef.getHumanList()
    }
  }
}
</script>

<template>
  <huilan-basic>
    <template v-if="tabs === '3' || tabs === '4'">
      <add-human
        ref="addHuman"
        v-show="isShowAdd"
        @on-cancel="isShowAdd = false"
        @ok="saveData"
      />
    </template>
    <template v-else>
      <add-human2d
        ref="addHuman2d"
        v-show="isShowAdd"
        @on-cancel="isShowAdd = false"
        @ok="saveData"
      />
    </template>
    <div v-show="!isShowAdd">
      <div class="header-box">
        <el-tabs v-model="tabs" @tab-click="handleTab">
          <el-tab-pane label="Web3D数字人" name="3"></el-tab-pane>
          <el-tab-pane label="UE3D数字人" name="4"></el-tab-pane>
<!--          暂时隐藏  勿删-->
          <el-tab-pane label="2D数字人" name="2"></el-tab-pane>
        </el-tabs>
        <div class="header-box__btn">
          <el-button v-if="permissionList.addBtn" type="success" size="small" @click="toAddHuman(tabs)">新增数字人</el-button>
        </div>
      </div>
      <huilan-basic-toolbar>
        <el-form :model="searchForm" inline size="small" class="Huilan-basic-search-form">
          <el-form-item>
            <el-input v-model="form.aimetaName" placeholder="数字人名称"></el-input>
          </el-form-item>
          <el-form-item class="search-from-tool">
            <el-button type="primary" @click="search"><i class="el-icon-search"></i></el-button>
            <el-button type="default" @click="onReset"><i class="aicosicon aicos-icon-clear"></i></el-button>
          </el-form-item>
        </el-form>
      </huilan-basic-toolbar>
      <human-config-list
        ref="listRef"
        @get-human-item="getHumanItem"
      />

    </div>

  </huilan-basic>
</template>

<style scoped lang="scss">
.Huilan-basic-search-form {
  /deep/ .el-form-item {
    margin-bottom: 0;
  }

  .search-from-tool {
    margin-right: 0;

    /deep/ .el-form-item__content {
      line-height: 1px;
    }

    /deep/ .el-button--small {
      padding: 5px;

      i {
        font-size: 20px;
      }
    }
  }
}

.header-box {
  //display: flex;
  //justify-content: flex-end;
  height: 40px;
  //align-items: center;
  position: relative;

  &__btn {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
